<template>
  <div class="selectBuildingWrapper">
    <!--<search @on-submit="onSubmit" @on-change="getResult" :auto-fixed="false" :value.sync="searchValue"></search>-->
    <div class="search-pos">
      <div class="searchBanner">
        <div class="search-box">
          <div class="search-bar">
            <img src="./../../images/ic_search.png" class="icon-search" alt="">
            <input type="text" class="searchInput" v-model="searchValue" placeholder="请输入送餐大楼">
          </div>
        </div>
        <span class="search_btn" @click="searchBulder">搜索</span>
      </div>
    </div>
    <div style="width: 100%;height: 4.6rem;"></div>
    <div class="content_box" v-show="parent" >
      <group v-for="item in results" @click="getChild(item)">
        <cell :title="item.areaName"></cell>
      </group>
    </div>
    <div class="content_box" v-show="child" >
      <group v-for="item in results" @click="getBuilding(item)">
        <cell :title="item.builderName"></cell>
      </group>
    </div>
  </div>
</template>

<script>
  import { Group, Cell } from './../../components'
  import { building } from './../../vuex/getters.js'
  import { update_building, update_builderId } from './../../vuex/actions.js'
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')

  export default {
    components: {
      Group,
      Cell
    },
    vuex: {
      getters: {
        building,
      },
      actions: {
        update_building,
        update_builderId
      }
    },
    data () {
      return {
        userInfo: LocalStorageUtil.getItem("User"),
        city: LocalStorageUtil.getItem("city"),
        results: [],
        searchValue: '',
        parent: true,
        child: false
      }
    },
    methods: {
      onSubmit (val) {

      },
      getResult (val) {
        console.log(val)
      },
      getChild (item) {
        console.log(item.id)
        var data = {
          action: 'list',
          areaId: item.id
        }
        MyRequest.MyGetWithToast("BuilderSearch", this, function(result, that) {
          that.results = result.data
          that.parent = false
          that.child = true
          Global.closeLoading()
        }, data)
      },
      searchBulder () {
        if(!this.searchValue) {
          Global.showToast("搜索条件不能为空", this)
          return
        }
        var data = {
          action: 'search',
          key: this.searchValue,
          cityId: this.userInfo.cityId
        }
        MyRequest.MyGetWithToast("BuilderSearch", this, function(result, that) {
          that.results = result.data
          that.parent = false
          that.child = true
          Global.closeLoading()
        }, data)
      },
      getBuilding (item) {
        console.log(item.id)
        this.update_builderId(item.id)
        this.update_building(item.builderName)
        history.go(-1)
      }
    },
    created: function() {
       Global.closeLoading()
      var data = {
        action: "list"
      }
      if(this.city) {
        data.cityName = this.city.cityName
      } else {
        data.cityName = this.userInfo.cityName
      }
      MyRequest.MyGetWithToast("AreaList", this, function(result, that) {
        console.log(result)
        that.results = result.data
        Global.closeLoading()
      }, data)
    }
  }
</script>
<style lang="less">
.selectBuildingWrapper  .weui_cell_bd {
  font-size: 1.3rem;
}
.selectBuildingWrapper .weui_cells {
  margin-top: 0;
}
.selectBuildingWrapper .weui_cells:before {
  border-top: 0;
}
.selectBuildingWrapper .weui_cells:after {
  border-bottom: 2px solid #f2f2f2;
}
.selectBuildingWrapper .search-pos {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.selectBuildingWrapper .search-pos .searchBanner {
  padding: .8rem 1rem;  
  background-color: #f2f2f2; 
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.selectBuildingWrapper .search-pos .searchBanner .search-box {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  background-color: #EFEFF4;
}
.selectBuildingWrapper .search-pos .searchBanner .search-box .search-bar {
  position: relative;
  padding-left: 3rem;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
  background: #ffffff;
  border-radius: .5rem;
}
.selectBuildingWrapper .search-pos .searchBanner .search-box .search-bar .icon-search {
    position: absolute;
    left: 10px;
    top: .4rem;
    width: 2rem;
    height: 2rem;
}
.selectBuildingWrapper .search-pos .searchBanner .search-box .search-bar  .searchInput {
  width: 100%;
  height: 3rem;
  outline: none;
  font-family: "Microsoft Yahei";
  font-size: 1.3rem;
  border: 0;
  padding-left: .5rem;
  display: inline-block;
}
.selectBuildingWrapper .search-pos .searchBanner .search_btn {
  display: inline-block;
  text-align: center;
  letter-spacing: .5rem;
  padding-left: 1rem;
  line-height: 3rem;
  font-size: 1.3rem;
  font-family: "Microsoft Yahei";
  color: #969696;
}
</style>
